<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view class="list-bg">
      <template v-if="!selectInvoiceVisible">
        <view class="pop-title">
          <view class="title">发票</view>
          <view
            class="close"
            @click="closePopFn"
          >
            <image
              class="close-icon"
              src="/static/image/close.png"
            />
          </view>
        </view>
        <view class="pop-content">
          <template>
            <view class="title-box">
              <view class="left-title-box">
                发票类型
              </view>
            </view>
            <view class="item-content clearfix">
              <view
                v-for="(item, index) in invioceTypeList"
                :key="index"
                :class="invoiceType == item.code ? 'class-item-select class-item' : 'class-item'"
                @click="selectItemFn('invoiceType', item.code)"
              >
                <view class="item-text">{{ item.label }}</view>
              </view>
            </view>
          </template>
          <template v-if="invoiceType==1">
            <template>
              <view class="title-box">
                <view class="left-title-box">
                  发票抬头
                </view>
              </view>
              <view class="item-content clearfix">
                <MenuCell
                  :cell-data.sync="curSubmitInvoiceInfo.invoice"
                  :cell-column="companyCellColumn"
                  @handelCellMethod="handelCellMethod"
                />
              </view>
            </template>
            <view class="invoice-remark">
              发票内容将是示详细商品名称与价格信息，发票金额为实际支付金额，不含虚拟资产、优惠等扣减金额
            </view>
          </template>
          <template v-if="invoiceType==0">
            <view v-if="isOpened">
              <MenuCell
                :cell-data.sync="curSubmitInvoiceInfo.invoice"
                :cell-column="companyCellColumn"
                @handelCellMethod="handelCellMethod"
              />
              <view class="privacy-radio">
                <u-radio-group v-model="redioFlag" placement="row">
                  <u-radio active-color="#ff5533" name="true" />
                </u-radio-group>
                <view class="radio-hint">
                  我已阅读并同意
                  <view @click="goWeb()">《增票资质确认书》</view>
                </view>
              </view>
              <view class="invoice-remark">
                发票内容将是示详细商品名称与价格信息，发票金额为实际支付金额，不含虚拟资产、优惠等扣减金额
              </view>
            </view>
            <view v-else class="not-opened">
              <image src="/ycPayments/static/image/no_opened_icon.png" />
              <view class="text-desc">完成企业认证后可开增值税专用发票！</view>
              <view class="btn-box">
                <button class="btn confirm-btn" :plain="true" @click="$u.throttle(submitFn, 500)">提交认证信息</button>
              </view>
            </view>
          </template>
        </view>
        <view v-if="invoiceType == 1 || invoiceType == -1 || (invoiceType == 0 && isOpened)" class="btn-box">
          <button class="btn confirm-btn" :plain="true" @click="$u.throttle(confirmFn, 500)">确定</button>
        </view>
      </template>
      <template v-if="selectInvoiceVisible">
        <view class="pop-title">
          <image
            class="icon-left"
            src="/static/shopIcon/back@2x.png"
            @click="backPrePage"
          />
          <view class="title">发票选择</view>
          <view
            class="close"
            @click="closePopFn"
          >
            <image
              class="close-icon"
              src="/static/image/close.png"
            />
          </view>
        </view>
        <InvoiceList
          :invoice-list="invoiceList"
          :invoice-type="invoiceType"
          @confirmInvoiceFn="confirmInvoiceFn"
          @handelCellMethod="handelCellMethod"
        />
      </template>
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page'
import MenuCell from '@/components/menu-cell'
import InvoiceList from '@/ycPayments/invoice/invoiceList'
import {
  queryInvoice,
} from '@/api/yc_invoice'
const contentStyle = 'padding-right: 32rpx;'
export default {
  components: {
    basePage,
    MenuCell,
    InvoiceList
  },
  props: {
    orderInfo: {
      type: Object,
      default: null
    },
    submitInvoiceInfo: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      title: 'Index',
      redioFlag: false,
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      invoiceList: [],
      invoiceType: -1,
      invioceTypeList: [ // 发票类型0：专票 1：普票
        {
          code: 1,
          label: '纸质普通发票'
        },
        {
          code: 0,
          label: '增值税专用发票'
        },
        {
          code: -1,
          label: '不开发票'
        },
      ],
      selectInvoiceVisible: false, // 选择发票页面展示
      companyCellColumnObj: {
        invoiceTitle: {
          label: '发票抬头',
          labelStyle: 'font-size: 24rpx;',
          fields: ['invoiceTitle'],
          border: true,
          showRightIcon: true,
          rightEl: 'input',
          inpDisabled: true,
          placeholder: '请选择发票抬头',
          rightIconStyle: 'margin-right: 0',
          methodName: 'selectInvoiceFn',
          inputWidth: 436,
        },
        taxId: {
          label: '单位税号',
          labelStyle: 'font-size: 24rpx;',
          fields: ['taxId'],
          rightEl: 'input',
          inpDisabled: true,
          placeholder: '单位税号',
          border: true,
          inputWidth: 436,
          contentStyle,
        },
        invoiceAddress: {
          label: '注册地址',
          labelStyle: 'font-size: 24rpx;',
          fields: ['invoiceAddress'],
          border: true,
          rightEl: 'textarea',
          inpDisabled: true,
          placeholder: '注册地址',
          inputWidth: 436,
          contentStyle,
        },
        tel: {
          label: '注册电话',
          labelStyle: 'font-size: 24rpx;',
          fields: ['tel'],
          border: true,
          rightEl: 'input',
          inpDisabled: true,
          placeholder: '注册电话',
          inputWidth: 436,
          contentStyle,
        },
        accountBankC: {
          label: '开户银行',
          labelStyle: 'font-size: 24rpx;',
          fields: ['accountBankC'],
          border: true,
          rightEl: 'textarea',
          inpDisabled: true,
          placeholder: '开户银行',
          inputWidth: 436,
          contentStyle,
        },
        accountBankNo: {
          label: '银行账号',
          labelStyle: 'font-size: 24rpx;',
          fields: ['accountBankNo'],
          border: true,
          placeholder: '银行账号',
          rightEl: 'input',
          inpDisabled: true,
          inputWidth: 436,
          contentStyle,
        }
      },
      companyCellColumn: [
        {
          label: '发票抬头',
          labelStyle: 'font-size: 24rpx;',
          fields: ['invoiceTitle'],
          border: true,
          showRightIcon: true,
          rightEl: 'input',
          inpDisabled: true,
          placeholder: '请选择发票抬头',
          rightIconStyle: 'margin-right: 0',
          methodName: 'selectInvoiceFn',
          inputWidth: 436,
          contentStyle,
        },
        /*{
          label: '单位税号',
          labelStyle: 'font-size: 24rpx;',
          fields: ['taxId'],
          rightEl: 'input',
          inpDisabled: true,
          placeholder: '单位税号',
          border: true,
          inputWidth: 436,
          contentStyle: 'font-size: 24rpx;color: #808080;padding-right: 32rpx;'
        },
        {
          label: '注册地址',
          labelStyle: 'font-size: 24rpx;',
          fields: ['invoiceAddress'],
          border: true,
          rightEl: 'input',
          inpDisabled: true,
          placeholder: '注册地址',
          inputWidth: 436,
          contentStyle,
        },
        {
          label: '注册电话',
          labelStyle: 'font-size: 24rpx;',
          fields: ['tel'],
          border: true,
          rightEl: 'input',
          inpDisabled: true,
          placeholder: '注册电话',
          inputWidth: 436,
          contentStyle,
        },
        {
          label: '开户银行',
          labelStyle: 'font-size: 24rpx;',
          fields: ['accountBankC'],
          border: true,
          rightEl: 'input',
          inpDisabled: true,
          placeholder: '开户银行',
          inputWidth: 436,
          contentStyle,
        },
        {
          label: '银行账号',
          labelStyle: 'font-size: 24rpx;',
          fields: ['accountBankNo'],
          border: true,
          placeholder: '银行账号',
          rightEl: 'input',
          inpDisabled: true,
          inputWidth: 436,
          contentStyle,
        }*/
      ],
      isOpened: false,
      radioCustomStyle: {
        width: '28rpx',
        float: 'left',
        margin: '8rpx 0 0 20rpx'
      },
    }
  },
  computed: {
    curOrderInfo() {
      return this.orderInfo
    },
    curSubmitInvoiceInfo() {
      return this.submitInvoiceInfo
    },
  },
  mounted() {
    this.initDataFn()
  },
  methods: {
    /*菜单列表执行函数*/
    handelCellMethod(methodName, val) {
      this[methodName](val)
    },
    initDataFn() {
      if (this.vuex_memberCompanyInfo && Object.keys(this.vuex_memberCompanyInfo).length > 0 && this.vuex_memberCompanyInfo.examStatus == 20) { //examStatus :10 待审核    20审核成功{认证会员}
        this.isOpened = true
      }
      this.invoiceType = this.curSubmitInvoiceInfo.invoice.invoice_type
      this.invoiceContent = this.curSubmitInvoiceInfo.invoiceFlag
      if (this.invoiceType == 10) {
        this.invoiceTitleType = this.curSubmitInvoiceInfo.invoice.invoiceTitleType || 1
      }
      if (Object.keys(this.curSubmitInvoiceInfo.invoice).length > 0 && this.invoiceType != -1) {
        this.companyCellColumn = []
        for (const valKey in this.companyCellColumnObj) {
          if (this.curSubmitInvoiceInfo.invoice[valKey]) {
            this.companyCellColumn.push(this.companyCellColumnObj[valKey])
          }
        }
      }
    },
    /*获取发票信息*/
    async queryInvoiceFn() {
      const {
        memberId,
      } = this.vuex_accountInfo
      const params = {
        memberId: memberId,
        customerCode: this.vuex_crmCustomerInfos?.customerCode,
      }
      if (this.invoiceType == 0) {
        params.invoiceType = 0
      }
      const res = await queryInvoice(params)
      if (res.code != 0) {
        this.$u.toast(res.msg)
        return
      }
      this.invoiceList = res.data.invoiceIftResList
    },
    /*跳转选择发票页面*/
    selectInvoiceFn() {
      this.selectInvoiceVisible = true
    },
    /*选择按钮方法*/
    selectItemFn(typeName, val) {
      this[typeName] = val
      if (typeName == 'invoiceType') {
        this.curSubmitInvoiceInfo.invoice = {}
        this.companyCellColumn = [this.companyCellColumnObj['invoiceTitle']]
      }
      if (typeName == 'invoiceType' && val != -1) {
        this.queryInvoiceFn()
      }
      if (typeName == 'invoiceType' && this.invoiceType == -1) {
        this.curSubmitInvoiceInfo.invoice.invoiceType = -1
      }
    },
    /*确认选中的的发票*/
    confirmInvoiceFn(val) {
      this.curSubmitInvoiceInfo.invoice = val
      this.companyCellColumn = []
      for (const valKey in this.companyCellColumnObj) {
        if (val[valKey]) {
          this.companyCellColumn.push(this.companyCellColumnObj[valKey])
        }
      }
      this.backPrePage()
    },
    /*请阅读增票资质确认书*/
    goWeb() {
      uni.navigateTo({
        url: '/ycPayments/invoice/confirmation?url=https://www.xfs.com/h5/orderlist/invoice/invoice.html'
      })
    },
    /*确认*/
    confirmFn() {
      if (this.invoiceType == 0 && !this.redioFlag) {
        this.$u.toast('请阅读并同意《增票资质确认书》')
        return
      }
      const {
        // invoiceType,
        taxId,
        invoiceTitle
      } = this.curSubmitInvoiceInfo.invoice
      const selfInvoiceStr = `个人${invoiceTitle ? '-' + invoiceTitle : ''}`
      const companyInvoiceStr = `单位${invoiceTitle ? '-' + invoiceTitle : ''}`
      const invoiceStrMaps = {
        0: `增值税发票${invoiceTitle ? '-' + invoiceTitle : ''}`,
        1: taxId ? companyInvoiceStr : selfInvoiceStr
      }
      const invoiceFlagText = invoiceStrMaps[Number(this.invoiceType)] ?? '不开发票'
      // let invoiceFlagText = '不开发票'
      // if (this.invoiceType == 1) {
      //   if (!taxId) {
      //     invoiceFlagText = '个人'
      //   } else {
      //     invoiceFlagText = '单位'
      //   }
      // }
      // if (this.invoiceType == 0) {
      //   invoiceFlagText = '增值税发票'
      // }
      if (this.invoiceType == -1) {
        this.curSubmitInvoiceInfo.invoice.invoiceType = -1
      }
      console.log(this.curSubmitInvoiceInfo.invoice);
      this.curOrderInfo.invoiceFlagText = invoiceFlagText
      this.$emit('update:orderInfo', this.curOrderInfo)
      this.$emit('update:submitInvoiceInfo', this.curSubmitInvoiceInfo)
      this.close()
    },
    /*提交认证信息*/
    submitFn() {
      uni.navigateTo({
        url: `/ycPayments/enterpriseCertification/index`
      })
    },
    close() {
      this.$emit('closePopFn')
    },
    closePopFn() {
      this.close()
    },
    /*返回发票页*/
    backPrePage() {
      this.selectInvoiceVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
@import "../static/scss/index";
.list-bg{
  height: 1164rpx;
  .icon-left{
    width: 24rpx;
    height: 48rpx;
    float: left;
    margin: 21rpx 24rpx 0 0;
  }
  .pop-content{
    .invoice-remark{
      margin-top: 16rpx;
      font-size: $uni-font-size-base;
      color: $uni-orange;
    }
    .not-opened{
      width: 100%;
      image{
        width: 54rpx;
        height: 54rpx;
        display: block;
        margin: 212rpx auto 0;
      }
      .text-desc{
        width: 100%;
        height: 40rpx;
        line-height: 40rpx;
        margin-top: 20rpx;
        font-size: $uni-font-size-base;
        color: $uni-text-color-grey;
        text-align: center;
      }
    }
    .privacy-radio {
      margin-top: 28rpx;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .radio-hint {
        float: right;
        font-size: 24rpx;
        width: calc(100% - 42rpx);
        view {
          display: inline-block;
          color: #2A5FCC;
        }
      }
    }
  }
}
</style>
